<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="宽高比组件" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
				<tm-sheet color="blue text" :margin="[0,0]" :round="0">
					<view class="text-size-s text-weight-b ">基本示例</view>
					<view class="text-size-xs  ">
						可以应用的场景:图片按比例展示、头像按比例显示、内容按规定美学比例排版、图片瀑布流等。更多需要你发现。
					</view>
				</tm-sheet>
				
				<view class="my-24">
					<tm-ratio :width="200" ratio="4/3">
						<template v-slot:default="{ data }">
							<view
								class="blue flex-center text-size-xxs"
								:style="{
									width: data.width,
									height: data.height
								}"
							>
							4/3高自动
							</view>
						</template>
					</tm-ratio>
					<tm-ratio :width="200" ratio="4/5">
						<template v-slot:default="{ data }">
							<view
								class="purple flex-center text-size-xxs"
								:style="{
									width: data.width,
									height: data.height
								}"
							>
							4/5高自动
							</view>
						</template>
					</tm-ratio>
					
					<tm-ratio :width="200" ratio="16/9">
						<template v-slot:default="{ data }">
							<view
								class="pink flex-center text-size-xxs"
								:style="{
									width: data.width,
									height: data.height
								}"
							>
							16/9高自动
							</view>
						</template>
					</tm-ratio>
				</view>
				
				<tm-sheet color="red text" :margin="[0,0]" :round="0">
					<view class="text-size-s text-weight-b ">一个基本的应用场景</view>
					<view class="text-size-xs text-weight-s ">瓷砖排列</view>
				</tm-sheet>
					
				<view style="height:500upx;line-height: 0;">
					<tm-ratio :height="200" ratio="3/4">
							<template v-slot:default="{ data }">
								<view
									class="red flex-center text-size-xxs"
									:style="{
										width: data.width,
										height: data.height
									}"
								></view>
							</template>
					</tm-ratio>
					<tm-ratio :height="200" ratio="2/1">
							<template v-slot:default="{ data }">
								<view
									class="pink flex-center text-size-xxs"
									:style="{
										width: data.width,
										height: data.height
									}"
								></view>
							</template>
					</tm-ratio>
					<tm-ratio :width="200" :height="200"  ratio="1/1">
							<template v-slot:default="{ data }">
								<view
									class="orange flex-center text-size-xxs"
									:style="{
										width: data.width,
										height: data.height
									}"
								></view>
							</template>
					</tm-ratio>
					<tm-ratio :height="200" ratio="3/4">
							<template v-slot:default="{ data }">
								<view
									class="blue flex-center text-size-xxs"
									:style="{
										width: data.width,
										height: data.height
									}"
								></view>
							</template>
					</tm-ratio>
					<tm-ratio :width="200" :height="200"  ratio="1/1">
							<template v-slot:default="{ data }">
								<view
									class="orange flex-center text-size-xxs"
									:style="{
										width: data.width,
										height: data.height
									}"
								></view>
							</template>
					</tm-ratio>
					<tm-ratio :height="200" ratio="2/1">
							<template v-slot:default="{ data }">
								<view
									class="green flex-center text-size-xxs"
									:style="{
										width: data.width,
										height: data.height
									}"
								></view>
							</template>
					</tm-ratio>
					
				</view>
					
	
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmRatio from "@/tm-vuetify/components/tm-ratio/tm-ratio.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmRatio},
	data() {
		return {};
	},
	methods: {}
};
</script>

<style></style>
